<script setup lang="ts">
  import { Card, Radio, RadioGroup, Slider } from 'ant-design-vue';
  import { storeToRefs } from 'pinia';
  import { useDesktopStore } from '@vben/stores';
  import { ref } from 'vue';

  const { windowOpacity, compTranMode } = storeToRefs(useDesktopStore());

  const tranFlag = ref(true);
  const change = () => {
    tranFlag.value = !tranFlag.value;
  };
</script>

<template>
  <div class="p-5">
    <card class="mb-5" title="窗口透明度">
      <Slider v-model:value="windowOpacity" :min="60"></Slider>
    </card>
    <card class="mb-5" title="窗口组件切换动画">
      <transition mode="out-in" :name="compTranMode">
        <div style="width: 120px; height: 120px; background: red" v-if="tranFlag"></div>
        <div style="width: 120px; height: 120px; background: blueviolet" v-else></div>
      </transition>
      <RadioGroup class="mt-5" v-model:value="compTranMode" @change="change">
        <Radio
          v-for="mode in ['opacity', 'rotate', 'fade', 'bounce']"
          :key="mode"
          :value="mode"
        >
          {{ mode }}
        </Radio>
      </RadioGroup>
    </card>
  </div>
</template>

<style lang="less" scoped>
  .opacity-enter-active,
  .opacity-leave-active {
    transition: opacity 0.25s ease;
  }

  .opacity-enter-from,
  .opacity-leave-to {
    opacity: 0;
  }

  .rotate-enter-active,
  .rotate-leave-active {
    transition: all 0.25s ease;
  }

  .rotate-enter-from,
  .rotate-leave-to {
    opacity: 0;
    transform: rotate(360deg) translateX(50px);
  }

  .fade-enter-active {
    transition: all 0.3s ease-out;
  }

  .fade-leave-active {
    //transition: all 0.25s ease;
    transition: all 0.25s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .fade-enter-from,
  .fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
  }

  .bounce-enter-active {
    animation: bounce-in 0.5s;
  }
  .bounce-leave-active {
    animation: bounce-in 0.5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(1);
      opacity: 0;
    }
    50% {
      transform: scale(1.25);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
</style>
